<template>
  <div>
    <ul>
      <li v-for="(item, index) in mobellist" :key="index">
        <!-- @click="goPath(item.product_id)" -->
        <router-link
          :to="{ path: '/particulars', query: { productID: item.product_id } }"
        >
          <img
            :src="'http://106.15.179.105:3000/' + item.product_picture"
            alt=""
          />
          <h2 class="lcp1">{{ item.product_name }}</h2>
          <h3 class="lcp1">{{ item.product_title }}</h3>

          <p>
            <span>{{ item.product_selling_price }}元</span
            ><span
              ><del v-if="item.product_selling_price != item.product_price"
                >{{ item.product_price }}元</del
              ></span
            >
          </p>
        </router-link>
      </li>
      <li class="lsg" v-if="!isFlag" @click="browseClick(mobellist)">
        <a href="javascript:;">浏览更多》</a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  components: {},
  props: ["mobellist", "isFlag"],
  name: "MiList",
  data() {
    return {};
  },
  mounted() {},
  methods: {
    browseClick(mobellist) {
      console.log(mobellist);
      var arr = [];
      this.mobellist.forEach((item) => {
        if (!arr.includes(item.category_id)) {
          arr.push(item.category_id);
        }
      });
      console.log(arr);
      this.$router.push({ path: "/allShop", query: arr });
    },
    test() {
      //全局自定义赋值
      // this.$allArray.categoryArr = this.categoryArr;
    },
  },
  computed: {},
  watch: {},
};
</script>

<style lang="scss" scoped>
ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  // justify-content: space-between;
  li {
    width: 229px;
    height: 295px;
    margin: 0 0 14.5px 16px;
    padding: 10px 0;
    background-color: white;
    text-align: center;
    img {
      display: block;
      width: 160px;
      height: 160px;
      background: url("../../public/placeholder.png") no-repeat 50%;
      margin: 0 auto;
    }
    h2 {
      color: #333333;
      font-size: 14px;
      margin: 25px 10px 0px;
    }
    h3 {
      color: #b0b0b0;
      font-size: 12px;
      margin: 5px 10px;
    }
    .lcp1 {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    p {
      font-size: 16px;
      span:nth-child(1) {
        color: #ff6700;
        font-size: 16px;
      }
      span:nth-child(2) {
        color: #b0b0b0;
        font-size: 16px;
        margin-left: 8px;
      }
    }
  }
  li:hover {
    transform: translateY(-5px);
    transition: all 0.5s;
    box-shadow: 1px 1px 20px 2px rgba(0, 0, 0, 0.3);
  }
}
.lsg {
  color: #333333;
  font-size: 18px;
  line-height: 300px;
  text-align: center;
  a {
    text-decoration: none;
    color: #333333;
  }
}
</style>